<template>
  <div class="model">
    <!--查询区域-->
    <div class="jeecg-basic-table-form-container">
      <a-form
        ref="formRef"
        @keyup.enter.native="searchQuery"
        :model="queryParam"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        style="background-color: #f7f8fc !important"
      >
        <a-row :gutter="24">
          <a-col :lg="6">
            <a-form-item name="name" label="模板名称">
              <a-input v-model:value="queryParam.name" placeholder="请输入模板名称" />
            </a-form-item>
          </a-col>
          <a-col :lg="6">
            <a-form-item name="modelType" label="模板类型">
              <dict-select placeholder="请选择模板类型" v-model:value="queryParam.modelType" dictTypeCode="model_type"></dict-select>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-col :lg="6">
                <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
                <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
              </a-col>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <a-row :span="24" class="model-row">
      <a-col :xxl="4" :xl="6" :lg="6" :md="6" :sm="12" :xs="24">
        <a-card class="add-knowledge-card" @click="openAddEdit()">
          <div class="flex">
            <!-- <Icon icon="ant-design:plus-outlined" class="add-knowledge-card-icon" size="20"></Icon> -->
            <span class="add-knowledge-card-title">添加模型</span>
          </div>
        </a-card>
      </a-col>
      <a-col :xxl="4" :xl="6" :lg="6" :md="6" :sm="12" :xs="24" v-for="item in modalList" v-if="modalList && modalList.length > 0">
        <a-card class="model-card" @click="openAddEdit(item)">
          <div class="model-header">
            <div class="flex">
              <img :src="getImage(item.provider)" class="header-img" />
              <div class="header-text">{{ item.name }}</div>
            </div>
          </div>
          <div class="mt-6">
            <ul>
              <li class="flex mr-14">
                <span class="label">模型类型</span>
                <span class="described">{{ item.modelType }}</span>
              </li>
              <li class="flex mr-14 mt-6">
                <span class="label">基础模型</span>
                <span class="described">{{ item.modelName }}</span>
              </li>
              <li class="flex mr-14 mt-6">
                <span class="label">创建者</span>
                <span class="described">{{ item.createBy }}</span>
              </li>
            </ul>
          </div>
          <div class="model-btn">
            <a-button class="model-icon" size="small" @click.prevent.stop="openAddEdit(item)">
              <icon-font iconClass="icon-opt-bianji" font-size="24px" title="编辑" color="#60666b" ></icon-font>
            </a-button>
            <a-dropdown placement="bottomRight" :trigger="['click']" :getPopupContainer="node => node.parentNode">
              <div class="ant-dropdown-link pointer model-icon" @click.prevent.stop>
               ...
              </div>
              <template #overlay>
                <a-menu>
                  <!--<a-menu-item key="param" @click="handleParamClick(item.id)">
                    <Icon icon="ant-design:setting-outlined" size="16"></Icon>
                    <span class="ml-4">模型参数配置</span>
                  </a-menu-item>-->
                  <a-menu-item key="delete" @click.prevent.stop="handleDeleteClick(item)">
                   <icon-font iconClass="icon-opt-shanchu" font-size="24px" title="删除" color="#60666b"></icon-font>
                    删除
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <Pagination
      v-if="modalList.length > 0"
      :current="pageNo"
      :page-size="pageSize"
      :page-size-options="pageSizeOptions"
      :total="total"
      :showQuickJumper="true"
      :showSizeChanger="true"
      @change="handlePageChange"
      class="list-footer"
      size="small"
    />
     <ModelAddEdit v-model:visible="showEdit" v-if="showEdit" :data="current" @done="reload" />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import {  Modal, Pagination,message } from 'ant-design-vue';
// import Iconfont from '@/components/common/IconFont/index.vue';
import { ModelApi } from '@/views/super/airag/aimodel/api/ModelApi';
import { imageList } from './model.data';
import ModelAddEdit from './components/model-add-edit.vue';

/**
 * 创建应用的集合
 */
const modalList = ref([]);
//当前页数
const pageNo = ref(1);
//每页条数
const pageSize = ref(10);
//总条数
const total = ref(0);
//可选择的页数
const pageSizeOptions = ref(['10', '20', '30']);

//查询参数
const queryParam = reactive({});
//查询区域label宽度
const labelCol = reactive({
  xs: 24,
  sm: 4,
  xl: 6,
  xxl: 6
});
//查询区域组件宽度
const wrapperCol = reactive({
  xs: 24,
  sm: 20
});
//表单的ref
const formRef = ref();
const showEdit = ref(false);
// 当前行数据
const current = ref(null);
/**
 * 加载数据
 */
const reload = () => {
  let params = {
    pageNo: pageNo.value,
    pageSize: pageSize.value,
    column: 'createTime',
    order: 'desc'
  };
  Object.assign(params, queryParam);
  ModelApi.list(params).then(res => {
    if (res.success) {
      modalList.value = res.data.records;
      total.value = res.data.total;
    } else {
      modalList.value = [];
      total.value = 0;
    }
  });
};
/**
 * 查询
 */
function searchQuery() {
  reload();
}

/**
 * 重置
 */
function searchReset() {
  formRef.value.resetFields();
  queryParam.createBy = '';
  //刷新数据
  reload();
}
onMounted(async () => {
  reload();
});
 function handlePageChange(page, current) {
        pageNo.value = page;
        pageSize.value = current;
        reload();
      }
// 新增编辑点击
const openAddEdit = record => {
  current.value = record;
  showEdit.value = true;
};
const handleDeleteClick = record => {
  Modal.confirm({
    title: '删除模型',
    content: `是否确认删除模型【${record.name}】?`,
    okText: '确认',
    cancelText: '取消',
    onOk() {
      ModelApi.delete({id:record.id}).then(res => {
        if (res.success) {
          reload();
          message.success('删除成功');
        } else {
          message.error(res.message);
        }
      });
    }
  });
};
/**
 * 获取图片
 * @param name
 */
const getImage = name => {
  return imageList.value[name];
};
</script>

<style scoped lang="less">
.model {
  height: calc(100vh - 115px);
  background: #f7f8fc;
  padding: 24px;
  overflow-y: auto;
  .model-row {
    max-height: calc(100% - 100px);
    margin-top: 20px;
    overflow-y: auto;
    .model-header {
      position: relative;
      font-size: 14px;
      .header-img {
        width: 32px;
        height: 32px;
        margin-right: 12px;
      }
      .header-text {
        font-size: 16px;
        font-weight: bold;
        color: #354052;
        width: calc(100% - 80px);
        overflow: hidden;
        align-content: center;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

.label {
  font-weight: 400;
  font-size: 12px;
  align-self: center;
  color: #8a8f98;
  overflow-wrap: break-word;
}
.described {
  font-weight: 400;
  margin-left: 14px;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 12px;
}

.flex {
  display: flex;
}

:deep(.ant-card .ant-card-body) {
  padding: 16px;
}

.mr-14 {
  margin-right: 14px;
}
.mt-6 {
  margin-top: 6px;
}

.ml-4 {
  margin-left: 4px;
}

.model-btn {
  position: absolute;
  right: 4px;
  top: 6px;
  height: auto;
  display: none;
}
.model-card {
  margin-right: 20px;
  margin-bottom: 20px;
  background: #fcfcfd;
  border: 1px solid #f0f0f0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border-radius: 10px;
  height: 152px;
  cursor: pointer;
}
.model-card:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  .model-btn {
    display: flex;
  }
}
.pointer {
  cursor: pointer;
}
.list-footer {
  text-align: right;
  margin-top: 5px;
}
.jeecg-basic-table-form-container {
  padding: 0;
  :deep(.ant-form) {
    background-color: transparent;
  }
  .table-page-search-submitButtons {
    display: block;
    margin-bottom: 24px;
    white-space: nowrap;
  }
}

.add-knowledge-card {
  margin-bottom: 20px;
  background: #fcfcfd;
  border: 1px solid #f0f0f0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border-radius: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  cursor: pointer;
  height: 152px;
  width: calc(100% - 20px);
  .add-knowledge-card-icon {
    padding: 8px;
    color: #1f2329;
    background-color: #f5f6f7;
    margin-right: 12px;
  }
  .add-knowledge-card-title {
    font-size: 16px;
    color: #1f2329;
    font-weight: 400;
    align-self: center;
  }
}

.add-knowledge-card:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.model-icon {
  background-color: unset;
  border: none;
  margin-right: 2px;
}
.model-icon:hover {
  color: #000000;
  background-color: rgba(0, 0, 0, 0.05);
  border: none;
}
.ant-dropdown-link {
  font-size: 14px;
  height: 24px;
  padding: 0 7px;
  border-radius: 4px;
  align-content: center;
  text-align: center;
}
</style>
